<template>
  <div class="p-2 page-flex">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
      :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div v-show="showSearch" class="mb-[10px]">
        <el-card shadow="hover">
          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
            <el-form-item label="项目名称" prop="proName">
              <el-input v-model="queryParams.proName" placeholder="请输入项目名称" style="width: 240px" clearable
                @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="审查时间">
              <el-date-picker style="width: 240px" v-model="dateRangeAuditTime" value-format="YYYY-MM-DD"
                type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]" />
            </el-form-item>
            <el-form-item label="审核类型" prop="auditType">
              <el-select v-model="queryParams.auditType" placeholder="请选择审核类型" style="width: 240px" clearable>
                <el-option v-for="dict in pro_quality_audit_type" :key="dict.value" :label="dict.label"
                  :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="是否通过" prop="isApproval">
              <el-select v-model="queryParams.isApproval" placeholder="请选择是否通过审查" style="width: 240px" clearable>
                <el-option v-for="opt in approvalOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="执行总裁" prop="proPresidentId">
              <el-select
                :model-value="selectedSearchPresident ? selectedSearchPresident.userName || selectedSearchPresident.nickName : ''"
                placeholder="请选择执行总裁" style="width: 240px" clearable @click="showSearchPresidentSelector = true"
                @clear="clearSearchPresident">
                <template #empty>
                  <div style="text-align: center; padding: 10px">
                    <el-button type="primary" plain @click="showSearchPresidentSelector = true"> 选择执行总裁 </el-button>
                  </div>
                </template>
              </el-select>
            </el-form-item>
            <el-form-item label="负责人" prop="proLeaderId">
              <el-select
                :model-value="selectedSearchLeader ? selectedSearchLeader.userName || selectedSearchLeader.nickName : ''"
                placeholder="请选择项目负责人" style="width: 240px" clearable @click="showSearchLeaderSelector = true"
                @clear="clearSearchLeader">
                <template #empty>
                  <div style="text-align: center; padding: 10px">
                    <el-button type="primary" plain @click="showSearchLeaderSelector = true"> 选择项目负责人 </el-button>
                  </div>
                </template>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </transition>
    <!-- 搜索条件用的执行总裁选择器 -->
    <UserSelector v-model:visible="showSearchPresidentSelector" title="选择执行总裁"
      :selected-user-ids="queryParams?.proPresidentId" :selected-user-names="selectedSearchPresidentName"
      :multiple="false" @confirmWithIds="handleSearchPresidentConfirm" @cancel="handleSearchPresidentCancel" />
    <!-- 搜索条件用的项目负责人选择器 -->
    <UserSelector v-model:visible="showSearchLeaderSelector" title="选择项目负责人"
      :selected-user-ids="queryParams?.proLeaderId" :selected-user-names="selectedSearchLeaderName" :multiple="false"
      @confirmWithIds="handleSearchLeaderConfirm" @cancel="handleSearchLeaderCancel" />

    <el-card shadow="never">
      <template #header>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate">修改</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain icon="Download" @click="handleExport"
              v-hasPermi="['project:receiveRegister:export']">导出</el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
      </template>
      <el-table ref="proQualityAudrecordTableRef" v-loading="loading" :data="proQualityAudrecordList"
        @selection-change="handleSelectionChange" border>
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="主键" align="center" prop="id" v-if="false" />
        <el-table-column label="填报人" align="center" width="150" prop="recordName" />
        <el-table-column label="填报日期" align="center" prop="recordTime" width="150">
          <template #default="scope">
            <span>{{ parseTime(scope.row.recordTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="项目名称" align="center" min-width="180" prop="proName" :show-overflow-tooltip="true" />
        <el-table-column label="项目执行总裁" align="center" width="180" prop="proPresidentsName"
          :show-overflow-tooltip="true" />
        <el-table-column label="项目负责人" align="center" width="180" prop="proLeadersName" :show-overflow-tooltip="true" />
        <el-table-column label="审核类型" align="center" prop="auditType" width="180">
          <template #default="scope">
            <dict-tag :options="pro_quality_audit_type" :value="scope.row.auditType" />
          </template>
        </el-table-column>
        <el-table-column label="审查时间" align="center" prop="auditTime" width="150">
          <template #default="scope">
            <span>{{ parseTime(scope.row.auditTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否通过审查" align="center" width="150" prop="isApproval">
          <template #default="scope">
            <dict-tag :options="pro_quality_is_approval" :value="scope.row.isApproval" />
          </template>
        </el-table-column>
        <el-table-column label="审查人" align="center" width="150" prop="auditName" :show-overflow-tooltip="true" />
        <el-table-column label="审查评分" align="center" width="150" prop="auditRank" />
        <el-table-column label="审核状态" align="center" width="120" prop="auditStatus">
          <template #default="scope">
            <dict-tag :options="approval_commit_status" :value="scope.row.auditStatus" />
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width" fixed="right">
          <template #default="scope">
            <el-tooltip content="修改" placement="top">
              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip content="提交审核" placement="top">
              <el-button link type="success" icon="Upload" @click="handleSubmitAudit(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize" @pagination="getList" />
    </el-card>

    <!-- 表格滚动控制组件 -->
    <TableScrollControl :table-ref="proQualityAudrecordTableRef" :visible="true" ref="scrollControlRef" />

    <!-- 添加或修改项目审查记录对话框 -->
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="900px" append-to-body>
      <el-form ref="proQualityAudrecordFormRef" :model="form" :rules="rules" label-width="120px" label-position="left">
        <el-form-item label="填报人" prop="recordBy" :required="true">
          <el-input :value="form.recordName || userStore.name" readonly />
        </el-form-item>
        <el-form-item label="填报日期" prop="recordTime" :required="true">
          <el-date-picker v-model="form.recordTime" type="date" value-format="YYYY-MM-DD" placeholder="请选择填报日期"
            style="width: 100%" />
        </el-form-item>
        <el-form-item label="项目名称" prop="proId" :required="true">
          <el-select v-model="form.proId" placeholder="请输入项目名称搜索" clearable filterable remote reserve-keyword
            :remote-method="searchProjects" :loading="projectLoading" style="width: 100%" @change="handleProjectChange">
            <el-option v-for="project in projectList" :key="project.id"
              :label="`${project.proName} (${project.proNumber || ''})`" :value="project.id" />
            <template #empty>
              <div class="text-center p-2">
                <span v-if="projectSearchKeyword && projectList.length === 0"> 未找到相关项目 </span>
                <span v-else> 请输入项目名称进行搜索 </span>
              </div>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="执行总裁" prop="proPresidentsName" :required="true">
          <el-input v-model="form.proPresidentsName" readonly placeholder="请选择项目" />
        </el-form-item>
        <el-form-item label="项目负责人" prop="proLeadersName" :required="true">
          <el-input v-model="form.proLeadersName" readonly placeholder="请选择项目" />
        </el-form-item>
        <el-form-item label="审查人" prop="auditBy" :required="true">
          <el-select :model-value="selectedAuditUserNames" placeholder="请选择审查人" style="width: 100%" clearable
            @click="showAuditSelector = true" @clear="clearAuditUsers">
            <template #empty>
              <div style="text-align: center; padding: 10px">
                <el-button type="primary" plain @click="showAuditSelector = true"> 选择审查人 </el-button>
              </div>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="审查时间" prop="auditTime" :required="true">
          <el-date-picker v-model="form.auditTime" type="date" value-format="YYYY-MM-DD" placeholder="请选择审查时间"
            style="width: 100%" />
        </el-form-item>
        <el-form-item label="审核类型" prop="auditType" :required="true">
          <el-select v-model="form.auditType" placeholder="请选择审核类型">
            <el-option v-for="dict in pro_quality_audit_type" :key="dict.value" :label="dict.label"
              :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="审查情况" prop="auditCase" :required="true">
          <el-input v-model="form.auditCase" type="textarea" :rows="3" placeholder="请输入审查情况" />
        </el-form-item>
        <el-form-item label="上传审查文件" prop="recordFile" :required="true">
          <file-upload v-model="form.recordFile" :file-size="256" />
        </el-form-item>
        <el-form-item label="是否通过审查" prop="isApproval" :required="true">
          <el-select v-model="form.isApproval" placeholder="请选择是否通过审查">
            <el-option v-for="opt in approvalOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="审查评分" prop="auditRank">
          <NumberInput v-model="form.auditRank" :min="0" :max="100" :precision="0" :allowDecimal="false"
            placeholder="请输入0-100的整数" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <!-- 审查人选择器 -->
      <UserSelector v-model:visible="showAuditSelector" title="选择审查人" :selected-user-ids="form?.auditBy"
        :selected-user-names="selectedAuditUserNames" :multiple="true" @confirmWithIds="handleAuditConfirm"
        @cancel="handleAuditCancel" />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 审核流程组件 -->
    <ApprovalFlow v-model:visible="approvalFlowVisible" :business-type="businessType"
      :business-id="currentAuditRecordForApproval?.id" :title="`项目审查记录审核-${currentAuditRecordForApproval?.proName || ''}`"
      @confirm="handleApprovalConfirm" @cancel="handleApprovalCancel" />
  </div>
</template>

<script setup name="ProQualityAudrecord" lang="ts">
import {
  listProQualityAudrecord,
  getProQualityAudrecord,
  addProQualityAudrecord,
  updateProQualityAudrecord,
  delProQualityAudrecord
} from '@/api/project/quality';
import { useUserStore } from '@/store/modules/user';
import { listProInfoForQuery } from '@/api/project/init/proInfo';
import { getToday } from '@/utils/dateUtils';
import { NumberInput } from '@/components/NumberInput';
import TableScrollControl from '@/components/TableScrollControl/index.vue';
import ApprovalFlow from '@/components/ApprovalFlow/index.vue';

const { proxy } = getCurrentInstance() as any;
const { pro_quality_audit_type, pro_quality_is_approval, approval_commit_status } = toRefs<any>(proxy?.useDict('pro_quality_audit_type', 'pro_quality_is_approval', 'approval_commit_status'));

const showSearch = ref(true);
const dateRangeAuditTime = ref(['', '']);
const queryFormRef = ref();
// 是否通过（映射方式，不依赖字典），用于搜索栏与新增/修改表单
const approvalOptions = ref([
  { label: '重大修改后通过', value: '1' },
  { label: '原则上通过', value: '2' },
  { label: '通过', value: '3' },
  { label: '不通过', value: '4' }
]);
const showSearchPresidentSelector = ref(false);
const selectedSearchPresident = ref(null);
const selectedSearchPresidentName = ref('');
const showSearchLeaderSelector = ref(false);
const selectedSearchLeader = ref(null);
const selectedSearchLeaderName = ref('');

const proQualityAudrecordList = ref([]);
const loading = ref(true);
const total = ref(0);

// 表格引用和滚动控制组件引用
const proQualityAudrecordTableRef = ref<any>(null);
const scrollControlRef = ref<any>(null);

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    proName: undefined,
    auditType: undefined,
    isApproval: undefined,
    proPresidentId: undefined,
    proLeaderId: undefined,
    params: {
      auditTime: undefined
    }
  }
});
const { queryParams } = toRefs(data);

const getList = async () => {
  loading.value = true;
  // 保证 params 至少有 auditTime 字段
  queryParams.value.params = { auditTime: undefined };
  proxy?.addDateRange(queryParams.value, dateRangeAuditTime.value, 'AuditTime');
  const res = await listProQualityAudrecord(queryParams.value);
  proQualityAudrecordList.value = res.rows;
  total.value = res.total;
  loading.value = false;
};

const handleSelectionChange = (selection: any[]) => {
  ids.value = selection.map((item) => item.id);
  single.value = selection.length !== 1;
  multiple.value = !selection.length;
};

const handleExport = () => {
  proxy?.download(
    'pro/quality/auditRecord/export',
    {
      ...queryParams.value
    },
    `project_quality_auditRecord_${new Date().getTime()}.xlsx`
  );
};

const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};
const resetQuery = () => {
  dateRangeAuditTime.value = ['', ''];
  selectedSearchPresident.value = null;
  selectedSearchPresidentName.value = '';
  selectedSearchLeader.value = null;
  selectedSearchLeaderName.value = '';
  queryFormRef.value?.resetFields();
  handleQuery();
};
const handleSearchPresidentConfirm = (data: any) => {
  if (data.users && data.users.length > 0) {
    selectedSearchPresident.value = data.users[0];
    selectedSearchPresidentName.value = data.userNames || '';
    if (queryParams.value) {
      queryParams.value.proPresidentId = data.userIds || '';
    }
  } else {
    selectedSearchPresident.value = null;
    selectedSearchPresidentName.value = '';
    if (queryParams.value) {
      queryParams.value.proPresidentId = '';
    }
  }
  showSearchPresidentSelector.value = false;
};
const handleSearchPresidentCancel = () => {
  showSearchPresidentSelector.value = false;
};
const clearSearchPresident = () => {
  selectedSearchPresident.value = null;
  selectedSearchPresidentName.value = '';
  if (queryParams.value) {
    queryParams.value.proPresidentId = '';
  }
};
const handleSearchLeaderConfirm = (data: any) => {
  if (data.users && data.users.length > 0) {
    selectedSearchLeader.value = data.users[0];
    selectedSearchLeaderName.value = data.userNames || '';
    if (queryParams.value) {
      queryParams.value.proLeaderId = data.userIds || '';
    }
  } else {
    selectedSearchLeader.value = null;
    selectedSearchLeaderName.value = '';
    if (queryParams.value) {
      queryParams.value.proLeaderId = '';
    }
  }
  showSearchLeaderSelector.value = false;
};
const handleSearchLeaderCancel = () => {
  showSearchLeaderSelector.value = false;
};
const clearSearchLeader = () => {
  selectedSearchLeader.value = null;
  selectedSearchLeaderName.value = '';
  if (queryParams.value) {
    queryParams.value.proLeaderId = '';
  }
};

const proQualityAudrecordFormRef = ref();
const dialog = reactive({
  visible: false,
  title: ''
});
const buttonLoading = ref(false);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);

const initFormData = {
  id: undefined,
  recordTime: undefined,
  recordBy: undefined,
  recordName: '',
  proId: undefined,
  auditType: undefined,
  auditTime: undefined,
  isApproval: undefined,
  auditCase: undefined,
  recordFile: undefined,
  remark: undefined,
  proPresidentsName: '',
  proLeadersName: '',
  auditBy: '',
  auditRank: undefined
};
const form = ref({ ...initFormData });
const rules = {
  recordBy: [{ required: true, message: '填报人不能为空', trigger: 'blur' }],
  recordTime: [{ required: true, message: '填报日期不能为空', trigger: 'change' }],
  proId: [{ required: true, message: '  项目不能为空', trigger: 'change' }],
  proPresidentsName: [{ required: true, message: '执行总裁不能为空', trigger: 'change' }],
  proLeadersName: [{ required: true, message: '项目负责人不能为空', trigger: 'change' }],
  auditType: [{ required: true, message: '审核类型不能为空', trigger: 'change' }],
  auditTime: [{ required: true, message: '审查时间不能为空', trigger: 'change' }],
  isApproval: [{ required: true, message: '是否通过不能为空', trigger: 'change' }],
  auditCase: [{ required: true, message: '审查情况不能为空', trigger: 'blur' }],
  recordFile: [{ required: true, message: '审查文件不能为空', trigger: 'change' }],
  auditBy: [{ required: true, message: '审查人不能为空', trigger: 'change' }],
  auditRank: [
    {
      validator: (_: any, value: any, callback: any) => {
        if (value === undefined || value === null || value === '') return callback();
        const num = Number(value);
        if (!Number.isInteger(num) || num < 0 || num > 100) return callback(new Error('评分需为0-100的整数'));
        return callback();
      },
      trigger: 'blur'
    }
  ]
};

const reset = () => {
  form.value = { ...initFormData };
  proQualityAudrecordFormRef.value?.resetFields && proQualityAudrecordFormRef.value.resetFields();
};

const userStore = useUserStore();
const showAuditSelector = ref(false);
const selectedAuditUserNames = ref('');


const projectList = ref<any[]>([]);
const projectLoading = ref(false);
const projectSearchKeyword = ref('');

const searchProjects = (query: string) => {
  projectSearchKeyword.value = query;
  if (searchProjects.timer) clearTimeout(searchProjects.timer);
  searchProjects.timer = setTimeout(() => {
    getProjectList(query);
  }, 300);
};
searchProjects.timer = null;

const getProjectList = async (searchKeyword = '') => {
  try {
    projectLoading.value = true;
    const res = await listProInfoForQuery({ pageNum: 1, pageSize: 50, proName: searchKeyword || undefined, auditStatus: '3' });
    projectList.value = res.rows || [];
  } finally {
    projectLoading.value = false;
  }
};

const handleProjectChange = (proId: string | number) => {
  if (!proId) {
    form.value.proPresidentsName = '';
    form.value.proLeadersName = '';
    return;
  }
  const project = projectList.value.find((p) => p.id === proId);
  if (project) {
    form.value.proPresidentsName = project.proPresidentsName || '';
    form.value.proLeadersName = project.proLeadersName || '';
  } else {
    form.value.proPresidentsName = '';
    form.value.proLeadersName = '';
  }
};

const handleAdd = () => {
  reset();
  form.value.recordTime = getToday();
  form.value.recordBy = userStore.userId;
  selectedAuditUserNames.value = '';
  dialog.visible = true;
  dialog.title = '添加项目审查记录';
};

const handleUpdate = async (row: any) => {
  if (!row.id) return;
  reset();
  const res = await getProQualityAudrecord(row.id);
  Object.assign(form.value, res.data);
  // 回显用户名称
  if (res.data.recordName) {
    form.value.recordName = res.data.recordName;
  }
  // 回显审查人名称
  if (res.data.auditName) {
    selectedAuditUserNames.value = res.data.auditName;
  } else {
    selectedAuditUserNames.value = '';
  }
  // 项目回显，参照register页面
  if (form.value.proId) {
    try {
      const projectRes = await listProInfoForQuery({ id: form.value.proId, pageNum: 1, pageSize: 1, auditStatus: '3' });
      const projectArr = Array.isArray(projectRes.rows) ? projectRes.rows : [];
      if (projectArr.length > 0) {
        const project = projectArr[0];
        if (!projectList.value.find((p) => p.id === project.id)) {
          projectList.value.unshift({
            id: project.id,
            proName: project.proName,
            proNumber: project.proNumber,
            proPresidentsName: project.proPresidentsName,
            proLeadersName: project.proLeadersName
          });
        }
        // 回显执行总裁和项目负责人
        form.value.proPresidentsName = project.proPresidentsName || '';
        form.value.proLeadersName = project.proLeadersName || '';
      }
    } catch (e) {
      // ignore
    }
  }
  dialog.visible = true;
  dialog.title = '修改项目审查记录';
};

const submitForm = () => {
  proQualityAudrecordFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      if (form.value.id) {
        await updateProQualityAudrecord(form.value).finally(() => (buttonLoading.value = false));
      } else {
        await addProQualityAudrecord(form.value).finally(() => (buttonLoading.value = false));
      }
      proxy?.$modal?.msgSuccess?.('操作成功');
      dialog.visible = false;
      await getList();
    }
  });
};

const cancel = () => {
  reset();
  dialog.visible = false;
};

const handleDelete = async (row?: any) => {
  const _ids = row?.id || ids.value;
  await proxy?.$modal.confirm('是否确认删除项目审查记录编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
  await delProQualityAudrecord(_ids);
  proxy?.$modal.msgSuccess('删除成功');
  await getList();
};

// 审查人选择器事件
const handleAuditConfirm = (data: any) => {
  if (data.users && data.users.length > 0) {
    form.value.auditBy = data.userIds || '';
    selectedAuditUserNames.value = data.userNames || '';
  } else {
    form.value.auditBy = '';
    selectedAuditUserNames.value = '';
  }
  showAuditSelector.value = false;
};
const handleAuditCancel = () => {
  showAuditSelector.value = false;
};
const clearAuditUsers = () => {
  form.value.auditBy = '';
  selectedAuditUserNames.value = '';
};

// 审核流程相关
const approvalFlowVisible = ref(false);
const currentAuditRecordForApproval = ref<any>(null);
const businessType = ref('PROJECT-AUDIT-RECORD');

/**
 * 提交项目审查记录审核
 */
const handleSubmitAudit = (row: any) => {
  if (!row.id) {
    ElMessage.error('审查记录ID不能为空');
    return;
  }

  currentAuditRecordForApproval.value = {
    id: row.id,
    proName: row.proName || '项目审查记录'
  };
  approvalFlowVisible.value = true;
};

/**
 * 审核流程确认回调
 */
const handleApprovalConfirm = async () => {
  try {
    ElMessage.success('审核流程提交成功');
    approvalFlowVisible.value = false;
    currentAuditRecordForApproval.value = null;
    // 刷新列表
    await getList();
  } catch (error) {
    console.error('审核流程提交失败:', error);
    ElMessage.error('审核流程提交失败');
  }
};

/**
 * 审核流程取消回调
 */
const handleApprovalCancel = () => {
  approvalFlowVisible.value = false;
  currentAuditRecordForApproval.value = null;
};

onMounted(() => {
  getList();
});

// 监听数据变化，重新初始化滚动控制
watch(proQualityAudrecordList, () => {
  nextTick(() => {
    setTimeout(() => {
      scrollControlRef.value?.initScrollControl();
    }, 500);
  });
}, { deep: true });
</script>

<style scoped>
/* 页面弹性布局 */
.page-flex {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 16px);
}
</style>
